// import { StrictMode } from 'react'
import { createRoot } from "react-dom/client";
import "./index.css";
// import App from './App.tsx'
import "./App.css";
import "@ant-design/v5-patch-for-react-19";
import { ApolloProvider } from "@apollo/client";
import { client } from "./utils/apollo.ts";
import { BrowserRouter, Route, Routes } from "react-router-dom";
// import Login from './container/Login/index.tsx';
import {  ROUTE_COMPONMENT } from "./routes/index.tsx";
import {  routes } from "./routes/menus.tsx";
// import Page404 from "./container/Page404/index.tsx";
import UserInfo from "./components/UserInfo/index.tsx";
import Layout from "./components/Layout/index.tsx";
import Login from "./container/Login/index.tsx";


createRoot(document.getElementById("root")!).render(
  <ApolloProvider client={client}>
    {/* 这个UserInfo会在访问任何页面之前加载 */}
    <BrowserRouter>
    {/* 
    // 见视频9-2
    存在bug：手动删除token后，重新登录会导致拿不到用户信息（除非手动刷新页面，暂时无法修复）
    这里需要关注一下层级问题： Routes里面的变化是不会导致UserInfo重新渲染的,
    为此需要修改userHooks，让他setStore里面加入refetch并导出refetch
    然后在login里面取到store进行refetch
    */}
      <UserInfo> 
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/" element={<Layout />}>
            {routes.map((item) => {
              const Component = ROUTE_COMPONMENT[item.key]
              return (
                <Route
                  path={item.path}
                  key={item.path}
                  element={<Component />}
                />
              );
            })}
            {/* {ROUTE_CONFIG.map((item) => {
              return (
                <Route
                  path={item.path}
                  key={item.key}
                  element={<item.element />}
                />
              );
            })} */}
          </Route>

          {/* 如果上面一个都没有匹配上，那就进入404页面 */}
          {/* <Route path="*" element={<Page404 />} /> */}
        </Routes>
        {/* <Route path="/" element={<App />} /> */}
      </UserInfo>
    </BrowserRouter>
  </ApolloProvider>
  // <StrictMode>

  // </StrictMode>,
);
